<template>
  <el-card
    class="box-card"
    shadow="hover"
    :body-style="{ padding: '0px 5px', height: '500px' }"
  >
    <template #header>
      <div class="rjfl">
        <span class="rjfl-title">热门游戏</span>

        <div class="rjfl-tabs">
          <div
            class="tab"
            :class="{ act: act.name == it.name }"
            v-for="it in tabs"
            :key="it.name"
            @mouseover="act = it;key++;"
          >
            <span>{{ it.name }}</span>
          </div>
        </div>

        <span class="rjfl-more" @click="gotoRouter(act.router,$router,{param: act.params},act.routerName)"
          >更多
          
        </span>
      </div>
    </template>

    <div class="games">
      <div class="games-left">
        <div
          class="toufu"
          v-for="i in 12"
          :key="i"
          @click="leftValue[i - 1] && gotoDetail(leftValue[i - 1], $router, axios)"
        >
          <template v-if="leftValue[i - 1]">
            <div class="img">
              <img :src="leftValue[i - 1].icon" />
            </div>
            <span>{{ leftValue[i - 1].name }}</span>
          </template>
          <template v-else>
            <div class="img">
              <img
                src="https://placeholder.idcd.com/?w=126&h=180&text=126x180"
              />
            </div>
            <span>占位文字</span>
          </template>
        </div>
      </div>

      <div class="games-right">
        <HotList :key="key" :data="rightValue" />
      </div>
    </div>
  </el-card>
</template>

<script setup>
import HotList from "./HotList.vue";
import { ref, computed, defineProps } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = ref(useRouter());

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});
const key = ref(0);
const tabs = ref([
  {
    name: "单机",
    tjkey: "aloneRecommendGameVos",
    hotkey: "aloneHotGameVos",
    router: "/game/alone-list.html",
    params: '389_409_422_1_pop',
    routerName: "game-alone-ist",
  },
  {
    name: "网游",
    tjkey: "networkRecommendGameVos",
    hotkey: "networkHotGameVos",
    router: "/game/alone-list.html",
    params: "389_397_422_1_pop",
    routerName: "game-alone-ist",
  },
  {
    name: "页游",
    tjkey: "pageRecommendGameVos",
    hotkey: "pageHotGameVos",
    router: "/game/web-list.html",
    params: "389_410_446_1_pop",
    routerName: "game-web-list",
  },
]);
const act = ref(tabs.value[0]);

const leftValue = computed(() => props.data[act.value.tjkey]);
const rightValue = computed(() => props.data[act.value.hotkey]);
</script>

<style lang="less" scoped>
.games {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 500px;
  padding: 10px 0 20px 0;

  &-left {
    width: 75%;
    display: flex;
    flex-flow: wrap;
    flex-wrap: row;
    justify-content: space-between;
    .toufu {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 10px 0px;
      width: 145px;
      height: 200px;
      cursor: pointer;
      .img {
        display: flex;
        align-items: center;
        width: 126px;
        height: 180px;
        border-radius: 8px;
        img {
          width: 126px;
          height: 180px;
          border-radius: 8px;
          object-fit: cover;
        }
      }
      &:hover .img {
        width: 140px;
        border-radius: 10px;
        height: 190px;
        transition: all 0.1s;
        opacity: 0.6;

        img {
          width: 140px;
          border-radius: 10px;
          height: 190px;
          border-radius: 8px;
          object-fit: cover;
        }
      }
      span {
        margin-top: 10px;
        font-size: 16px;
        font-weight: 400;
        color: #1d2127;
        line-height: 16px;
      }
      &:hover span{
        color: @link-color;
      }
    }
  }

  &-right {
    width: 25%;
  }
}

.rjfl-tabs {
  display: flex;
  justify-content: flex-start;
  flex: 1;
  padding-left: 80px;
  .tab {
    display: flex;
    position: relative;
    justify-content: center;
    width: 64px;
    cursor: pointer;
    span {
      font-size: 16px;
      font-weight: 500;
      color: #93999e;
      line-height: 16px;
    }
  }

  .act {
    span {
      color: @theme-color;
    }
  }
  .act:after {
    position: absolute;
    content: " ";
    border-bottom: 2px solid @theme-color;
    width: 32px;
    bottom: -19px;
  }
}

@media screen and (max-width: 1366px) {
  .toufu {
    width: 138px !important;
  }
}
</style>
